<!DOCTYPE html>
<html>
<head>
    <title>LYXY图书管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="description" content="LYXY图书管理系统" />
    <meta name="keywords" content="LYXY,网站管理系统,企业网站" />
    <meta name="Author" content="phenix" />
    <meta name="CopyRight" content="LYXY科技" />
    <link rel="stylesheet" type="text/css" href="./Style/skin.css" />
</head>
    <body>
        <table width="100%" >
            <!-- 顶部部分 -->
            <tr height="41"><td colspan="2" background="./Images/login_top_bg.gif">&nbsp;</td></tr>
            <!-- 主体部分 -->
            <tr style="background:url(./Images/login_bg.jpg) repeat-x;" height="532"    >
                <!-- 主体左部分 -->
                <td id="left_cont" valign="top"  width="100%" height="100%">
                    <table  >
                        <tr>
                            <td width="20%" rowspan="2">
                                <ul>
                                    <li><img src="./Images/book.jpg" />&nbsp;<a href="javascript:void(0)"/></li>
                                </ul>
                             </td>
                        </tr>
                    </table>
                </td>
                <!-- 主体右部分 -->
                <td id="right_cont">
                    <table height="100%">
                        <tr height="30%"><td colspan="3">&nbsp;</td></tr>
                        <tr>
                            <td width="30%" rowspan="5">&nbsp;</td>
                            <td valign="top" id="form">
                                <form id="fmLogin">
                                    <table valign="top" width="50%">
                                        <tr><td colspan="2"><h4 style="letter-spacing:1px;font-size:16px;">LYXY图书管理系统</h4></td></tr>
                                        <tr><td>管理员：</td><td><input type="text" name="name" required /></td></tr>
                                        <tr><td>密&nbsp;&nbsp;&nbsp;&nbsp;码：</td><td><input type="password" name="pwd" required/></td></tr>
                                        <tr><td>验证码：</td><td style="display: flex;">
                                            <input type="text" name="valcode" value="" style="width:80px;margin-top: 9px;" required/>
                                            <img id="kaptcheImg" style="width: 82px;height: 24px;margin-top: 9px;"/>
                                        </td></tr>
                                        <tr class="bt"><td>&nbsp;</td><td><input type="submit" value="登录" />&nbsp;<input type="reset" value="重填" /></td></tr>
                                    </table>
                                </form>
                            </td>
                            <td rowspan="5">&nbsp;</td>
                        </tr>
                        <tr><td colspan="3">&nbsp;</td></tr>
                    </table>
                </td>
            </tr>
            <!-- 底部部分 -->
            <tr id="login_bot"><td colspan="2"><p>Copyright © 2012-2022 LYXY龙岩学院</p></td></tr>
        </table>
    </body>
    <script type="text/javascript" src="./Js/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="./Plugins/axios.min.js"></script>
    <script type="text/javascript" src="./Js/request.js"></script>
    <script>

        const getKaptchaCode = () => {
            $('#kaptcheImg').attr('src', '/common/kaptcha?'+Math.random());
        }

        $(() => {
            getKaptchaCode();
            $('#kaptcheImg').click(() => {
                getKaptchaCode();
            })

            $('#fmLogin').submit((e) => {
                e.preventDefault();
                const data = {
                    name: $('input[name="name"]').val(),
                    pwd: $('input[name="pwd"]').val(),
                    valcode: $('input[name="valcode"]').val()
                }
                window.$axios.request({
                    url: 'user/login',
                    method: 'post',
                    data
                }).then(res => {
                    if (res.code === 200) {
                        sessionStorage.setItem('USERNAME', data.name)
                        window.location.href = '/index.html';
                    } else {
                        alert(res.message);
                        getKaptchaCode();
                    }
                })
            })

        })
    </script>
</html>